<template>
	<div class="TrafficServices">
		<div class="bottom">
			<h2>图片的流量列表</h2>
			<el-table :data="tableData" height="500px">
				<el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
				<el-table-column align="center" label="文件名称">
					<template slot-scope="scope">
						{{scope.row}}
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" width="180">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="details(scope.row)">下载</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			tableData: [],
		}
	},
	mounted() {
		this.history()
	},
	methods: {
		//列表
		async history() {
			let { data: res }  = await this.$api.getPngs()
			this.tableData = res
		},
		
		//下载按钮
		async details(name){
			let { data: res }  = await this.$api.getPng(name)
			console.log(res)
		}
		
	},
}
</script>
<style scoped>
.TrafficServices {
	width: 98%;
	height: 100%;
	padding: 10px 10px;
	background-color: #f2f4f6;
}
.top {
	height: 20%;
	width: 100%;
	background-color: #ffffff;
	/* margin-top: 10px; */
	padding: 10px;
	box-sizing: border-box;
}
.bottom {
	width: 100%;
	background-color: #ffffff;
	margin-top: 20px;
	padding: 20px;
	box-sizing: border-box;
}
.bottom h2 {
	margin-top: 0;
}
</style>
